<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->

    <title>大咖云集更多</title>
    <style>
        body {
            background-color: white;
        }

        .bigshot-video-tab {
            color: rgba(34, 34, 34, 0.45);
        }

        .bigshot-video-tab-active {
            color: #2C68FF;
        }

        .bigshot-video-tab-line {
            border-radius: 2px;
            background-color: #2C68FF;
            width: 0.36rem;
            height: 0.06rem;
            margin-top: 3px;
        }

        .bigshot-video-item {
            padding: 20px 0 14px 0;
            border-bottom: 1px solid #f6f6f6;
        }

        .bigshot-video-item-img {
            width: 1.22rem;
            height: 1.22rem;
            margin-right: 0.36rem;
        }

        .bigshot-video-item-img img {
            height: 100%;
            width: 100%;
            border-radius: 1rem;
        }

        .bigshot-video-item-name {
            color: #222222;
            width: 4.5rem;
        }

        .bigshot-video-item-desc {
            color: rgba(34, 34, 34, 0.45);
            line-height: 0.36rem;
        }

        .bigshot-video-item-right {
            margin-top: 8px;
        }

        .bigshot-video-item-icon {
            color: #B9B9B9;
        }

        .bigshot-video-item-count {
            color: #222222;
            margin-right: 0.44rem;
        }

        .bigshot-video-item-play-count {
            color: #222222;
        }

        .bigshot-video-item-time {
            color: #BA9775;
        }

        .bigshot-video-item-content {
            color: #222222;
        }

        .bigshot-video-wrap {
            display: none;
        }

        .bigshot-video-list {
            padding: 4px 0.32rem 0 0.32rem
        }


    </style>
</head>
<body>

<div class="flex-column ff400 fspx14 h-100-p">
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fspx16"></span>
            </div>
            <div class="center-bar fspx16 ff500 line1">大咖云集</div>
            <div class="right-bar">
            </div>
        </div>
    </div>
    <div class=" flex-column" style="padding:0 0.4rem;background-color: white">
        <div>
            <div class="bigshot-video-tabs flex-row justify-content-between fs16"></div>
        </div>
    </div>

    <!--大咖云集-->
    <div class=" flex-column flex-1  scoll-y scoll-area">
        <div>
            <div class="flex-column bigshot-video-list"></div>
        </div>

        <div class="more"></div>
    </div>


</div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>

<script src="../../plugin/mescroll/js/mescroll.min.js"></script>


<script>
  let funcCode = '001'
  let pm = {
    isScroll: false,
    pageNum: 1,
    pageSize: 10,
    tabs: [{name: '全部', industryType: '', funcCode: '001'}, {name: '宏观', industryType: '0', funcCode: '002'}, {name: '外汇', industryType: '1', funcCode: '003'},
      {name: '固收', industryType: '2', funcCode: '004'}, {name: '大宗', industryType: '3', funcCode: '005'}, {name: '策略', industryType: '4', funcCode: '006'}]
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    getTabList()
    getList()
    pageScroll(getList)
  }

  function reLoadPage() {
    getTabList()
    getList()
    pageScroll(getList)
  }

  // 查询大咖
  function getList() {
    let fCode = funcCode
    Server.bigshotVideo.selectCharacterAll({
      industryType: pm[fCode].industryType,
      pageNum: pm[fCode].pageNum,
      pageSize: pm[fCode].pageSize
    }).then(function (data) {
      let htmlStr = ''
      data.characterList.forEach(function (item) {
        htmlStr += '<div class=\'bigshot-video-item flex-column\'>'
        htmlStr += '<div class=\'flex-row\' onclick=\'goBigDetail("' + item.characterId + '")\'>'
        htmlStr += '<div class=\'bigshot-video-item-img\'><img src=' + item.headUrl + ' /></div>'
        htmlStr += '<div class=\'flex-column flex-1\'>'
        htmlStr += '<div class=\'bigshot-video-item-name fs16 ff500 line1\'>' + item.name + '</div>'
        htmlStr += '<div class=\'bigshot-video-item-desc mt5 fs13 line2\'>' + Utils.dealUndefined(item.introduction) + '</div>'
        htmlStr += '<div class=\'bigshot-video-item-right flex-row align-items-center\'>'
        htmlStr += '<span class=\'bigshot-video-item-icon iconfont iconshipin fspx11\'></span>'
        htmlStr += '<span class=\'bigshot-video-item-count ml5\'>' + Utils.dealNumber(item.articleCnt) + '</span>'
        htmlStr += '<span class=\'bigshot-video-item-icon iconfont iconbofangliang-01\'></span>'
        htmlStr += '<span class=\'bigshot-video-item-play-count ml5\'>' + Utils.dealNumber(item.visitCnt) + '</span>'
        htmlStr += '</div>'
        htmlStr += '</div>'
        htmlStr += '</div>'
        if (item.trainingInfoDtoList && item.trainingInfoDtoList.length > 0) {

          let jsonStr = JSON.stringify({
            infoId: item.trainingInfoDtoList[0].trainingId,
            infoType: '2',
            resourceType: '2'
          })
          htmlStr += '<div class=\'flex-row mt10 fs15\' onclick=\'goDetail(' + jsonStr + ')\'>'
          htmlStr += '<div class=\'bigshot-video-item-time\'>' + DateUtils.int2TimeTopic(item.trainingInfoDtoList[0].issuerDttm) + '：</div>'
          htmlStr += '<div class=\'bigshot-video-item-content line1 flex-1\'>' + item.trainingInfoDtoList[0].mainTitle + '</div>'
          htmlStr += '</div>'
        }

        htmlStr += '</div>'
      })

      if (Utils.notEmpty(data.characterList) && data.characterList.length >= pm[fCode].pageSize) {
        pm[fCode].isScroll = true
      } else {
        $('.more').html('暂无更多数据')
        pm[fCode].isScroll = false
      }
      $('.bigshot-video-wrap' + fCode).append(htmlStr)
    })
  }

  function goBigDetail(characterId) {
    jsBridge.openWindow('html/video/bigshot-detail.html?characterId=' + characterId, {}, {noBar: false})
  }

  //渲染tab列表
  function getTabList() {
    let htmlStr = ''
    pm.tabs.forEach(function (item, index) {
      asemblyPage(item)
      if (index === 0) {
        htmlStr += '<div class=\'bigshot-video-tab bigshot-video-tab-active ff500 flex-column align-items-center\' funcCode=\'' + item.funcCode + '\'>'
        htmlStr += '<div>' + item.name + '</div>'
        htmlStr += '<div class=\'bigshot-video-tab-line\'></div>'
        htmlStr += '</div>'
      } else {
        htmlStr += '<div class=\'bigshot-video-tab flex-column align-items-center\' funcCode=\'' + item.funcCode + '\'>' + item.name + '</div>'
      }
      $('.bigshot-video-list').append('<div class=\'bigshot-video-wrap bigshot-video-wrap' + item.funcCode + '\'></div>')
    })
    $('.bigshot-video-tabs').html(htmlStr)
    $('.bigshot-video-list').find('.bigshot-video-wrap').eq(0).show()
    changeTab()
  }

  //切换tab
  function changeTab() {
    $('.bigshot-video-tabs').on('click', '.bigshot-video-tab', function () {
      $('.bigshot-video-tabs .bigshot-video-tab').removeClass('bigshot-video-tab-active ff500')
      $('.bigshot-video-tabs .bigshot-video-tab .bigshot-video-tab-line').remove()
      $(this).addClass('bigshot-video-tab-active ff500')
      $(this).append('<div class=\'bigshot-video-tab-line\'></div>')
      let fCode = $(this).attr('funcCode')
      funcCode = fCode
      $('.bigshot-video-wrap').hide()
      $('.bigshot-video-wrap' + fCode).show()
      //记录该位置
      $('.scoll-area').animate({scrollTop: pm[fCode].scrollHeight}, 200)//动画效果
      let videoHtml = $('.bigshot-video-wrap' + fCode).html()
      if (pm[fCode].pageNum === 1 && Utils.isEmpty(videoHtml)) {
        getList()
      }
    })

  }

  //初始化数据
  function asemblyPage(item) {
    pm[item.funcCode] = {
      pageNum: 1,
      pageSize: 10,
      isScroll: false,
      industryType: item.industryType,
      scrollHeight: 0
    }
  }


  //翻页
  function pageScroll(callback) {
    $('.scoll-area').scroll(function () {
      if (pm[funcCode].isScroll) {
        let scrollTop = $(this).scrollTop()
        let scrollHeight = $('.scoll-area').height()
        let windowHeight = $(this).height()
        if (pm[funcCode].isScroll && scrollTop + windowHeight >= scrollHeight - 100) {

          $('.more').html('加载中…')

          //防止二次加载
          pm[funcCode].isScroll = false
          pm[funcCode].pageNum++
          pm[funcCode].scrollHeight = scrollTop

          callback(funcCode)
        }
      }
    })
  }


</script>
</html>
